<template>
  <div class="container">
    <el-row class="warp">
      <el-row class="header">
        <el-col :span="3" class="logo">
          <div class="logo-nr">
            <img src="../assets/llogo.png" height="41" width="41">
            <span>河北汇多物联</span>
          </div>
        </el-col>
        <el-col :span="17" class="nav">
          <ul>
            <router-link :class="{'feint-nav':ismonitor}" :to="{path:'/layout/Monitor/environment'}" tag="li">
              <img src="../assets/jiankong1.png">
              <span>监控系统</span>
            </router-link>
            <router-link :class="{'feint-nav':isalarm}" :to="{path:'/layout/alarm'}" tag="li">
              <img src="../assets/gaojing.png">
              <span>告警管理</span>
            </router-link>
            <router-link :to="{path:'/layout/Chart'}" tag="li">
              <img src="../assets/report.png">
              <span>图表管理</span>
            </router-link>
            <router-link :to="{path:'/layout/log'}" tag="li">
              <img src="../assets/log.png">
              <span>日志管理</span>
            </router-link>
            <router-link :to="{path:'/layout/linkage'}" tag="li">
              <img src="../assets/liandong.png">
              <span>联动管理</span>
            </router-link>
            <router-link :class="{'feint-nav':isdevice}" :to="{path:'/layout/device'}" tag="li">
              <img src="../assets/laindongguanlinewe.png">
              <span>设备管理</span>
            </router-link>
            <router-link :class="{'feint-nav':issystem}" :to="{path:'/layout/system'}" tag="li">
              <img src="../assets/sysmater.png">
              <span>系统管理</span>
            </router-link>
          </ul>
        </el-col>
        <el-col :span="4">
          <div class="timer">
            <el-col :span="24">
              <el-col :span="8" :xs="12" :sm="13" style="text-align:right">
                {{timer}}
              </el-col>
              <el-col :span="8" :xs="12" :sm="11" style="text-align:left;text-indent: 3px">
                {{timer1}}
              </el-col>
              <el-col :span="5" :xs="12" :sm="13" style="text-align:right">
                {{username}}
              </el-col>
              <el-col :span="2" :xs="12" :sm="11" style="text-align:left;text-indent: 3px">
                <span><img alt="退出" @click="signout" src="../assets/out.png" height="14" width="14"></span>
              </el-col>
            </el-col>
          </div>
          <!--弹窗-->
          <transition name="fade">
            <div v-if="states" class="alarm-pop" shadow="always">
              <div class="alarm-pop-header">
                <div class="alarm-pop-header-left">
                  <a href="/#/layout/log">
                    <i class="el-icon-warning"></i>
                  </a>
                </div>
                <div class="alarm-pop-header-main">告警信息</div>
                <div class="alarm-pop-header-right" @click="removeallTab">
                  <i class="el-icon-circle-close-outline"></i>
                </div>
              </div>
              <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
                <el-tab-pane
                  v-for="(item, index) in editableTabs2"
                  :label="item.title"
                  :name="item.name"
                  align="center"
                >
                  {{item.content}}
                </el-tab-pane>
              </el-tabs>
              <el-badge :value="this.editableTabs2.length" class="item"></el-badge>
            </div>
          </transition>
        </el-col>
      </el-row>
      <el-row class="contents">
        <router-view/>
      </el-row>
    </el-row>
  </div>
</template>
<script>
  import {get_chart_sensorlist} from '../js/public.js';

  export default {
    name: "layout",
    data() {
      return {
        editableTabs2: [],//数据列表
        tabIndex: 1,//taps索引
        editableTabsValue2: "",//当前所在位置名称
        states: false,//弹窗是否显示
        navLists: [
          {
            name: '监控系统',
            path: '/layout/Monitor',
            src: require("../assets/llogo.png"),
            active: true
          },
          {
            name: '告警管理',
            path: '/layout/alarm',
            src: require("../assets/llogo.png"),
            active: false
          },
          {
            name: '图表管理',
            path: '/layout/Chart',
            src: require("../assets/llogo.png"),
            active: false
          },
          {
            name: '日志管理',
            path: '/layout/log',
            src: require("../assets/llogo.png"),
            active: false
          },
          {
            name: '联动管理',
            path: '/layout/linkage',
            src: require("../assets/llogo.png"),
            active: false
          },
          {
            name: '设备管理',
            path: '/layout/device',
            src: require("../assets/llogo.png"),
            active: false
          },
          {
            name: '系统管理',
            path: '/layout/system',
            src: require("../assets/llogo.png"),
            active: false
          }
        ],
        timer: '2018/1/30',
        timer1: '08:14:23',
        username: "admin",
        issystem: false,
        isdevice: false,
        ismonitor: false,
        isalarm: false
      }
    },
    created() {
      this.routes();
      this.get_alarm_status();
      this.get_sys_time();
      setInterval(this.update_time, 1000);
      this.$data.username = sessionStorage.getItem("username");
    },
    methods: {
      /*设置初始弹窗*/
      alarm_set_time() {
        let that = this;
        setInterval(function () {
          that.getpopup()
        }, 1000)
      },
      /*获取告警弹窗是否开启*/
      get_alarm_status() {

        let _this = this;
        this.$ajax.post("./cgi-bin/main.cgi", {"cmd": "CGI_POPUP_GET_ENABLE"}).then(function (res) {

          if (res.data.status == true) {
            _this.$store.commit('setalarmstatus', res.data.status);
            window.alarm_interval = setInterval(function () {
              _this.getpopup()
            }, 1000);
          } else {
            window.clearInterval(alarm_interval);
          }
        })


      },
      getpopup() {
        let that = this;
        this.$ajax.post("./cgi-bin/main.cgi", {"cmd": "CGI_POPUP_GET_ALARM"}).then(function (res) {

          if (that.$store.state.alarmstatus == true) {
            if (res.data.length != 0) {
              that.$data.states = true;
              $.each(res.data, function (i, value) {
                let newTabName = ++that.tabIndex + '';
                that.$data.editableTabs2.push({
                  title: get_chart_sensorlist(value.sensorid),
                  name: newTabName,
                  content: value.alarmstr
                });
                that.$data.editableTabsValue2 = newTabName;
              })
            } else if (res.data.length == 0 && that.$data.editableTabs2.length == 0) {
              that.$data.states = false;
            }
          } else {
            that.$data.states = false;
            that.$data.editableTabs2 = [];
          }
        }).catch(function () {
          window.clearInterval(alarm_interval);
        })

      },
      /*整个弹窗关闭清空所有数据*/
      removeallTab() {
        this.$data.editableTabs2 = [];
        this.$data.editableTabsValue2 = "";
        this.$data.states = false;
      },
      /*删除单个的tap页面*/
      removeTab(targetName) {
        let tabs = this.editableTabs2;
        let activeName = this.editableTabsValue2;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue2 = activeName;
        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
        if (this.editableTabs2.length == 0) {
          this.$data.states = false;
        }
      },
      get_sys_time() {//获取系统时间
        let that = this;
        if (window.sessionStorage.getItem('username') == "zyl") {
          $.ajax({
            url: "../static/sys_time.json",
            contentType: "application/json;charset=utf-8",
            type: "GET",
            dataType: "text",
            success: function (msg) {
              let data = eval("(" + msg + ")");
              //{"time":"2018.04.26-00:00:00"}

              //实时刷新兼容性问题
              let str = data.time.replace(/-/g, " ");
              let sys_time = str.replace(/\./g, "/");
              let storage = window.sessionStorage;
              storage.setItem('time', sys_time);
              let time_arr = sys_time.split(" ");
              that.timer = time_arr[0];
              that.timer1 = time_arr[1];
            }
          });

        } else {
          $.ajax({
            url: "cgi-bin/JHGetTime.cgi",
            contentType: "application/json;charset=utf-8",
            type: "post",
            data: JSON.stringify(""),
            success: function (msg) {
              let data = eval("(" + msg + ")");

              let str = data.time.replace(/-/g, " ");
              let sys_time = str.replace(/\./g, "/");
              let storage = window.sessionStorage;
              storage.setItem('time', sys_time);
              let time_arr = sys_time.split(" ");
              that.timer = time_arr[0];
              that.timer1 = time_arr[1];
            }
          });

        }
      },
      update_time() {
        let storage = window.sessionStorage;
        let time = storage.getItem("time");
        let timestamp2 = Date.parse(new Date(time));
        timestamp2 += 1000;

        let currenttime = new Date(timestamp2);
        let nowtime = this.getdate(currenttime);
        storage.setItem('time', nowtime);

        let time_arr = nowtime.split(" ");
        this.timer = time_arr[0];
        this.timer1 = time_arr[1];
        // this.sys_time = nowtime;
      },
      getdate(now) {
        let y = now.getFullYear();
        let m = now.getMonth() + 1;
        let d = now.getDate();

        let current = y + "/" + (m < 10 ? "0" + m : m) + "/" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
        return current;
      },
      signout() {
        this.set_log("用户退出");
        sessionStorage.clear();
        this.$router.go(0);
      },
      set_log(str) {//用户操作日志
        let msg = {"cmd": "CGI_LOG_SET_OPT", "content": str};
        $.ajax({
          url: "cgi-bin/main.cgi",
          contentType: "application/json;charset=utf-8",
          type: "post",
          data: JSON.stringify(msg),
          success: function (msg) {
          }
        })
      },
      routes() {
        if (this.$route.path == '/layout/systemversion' || this.$route.path == '/layout/systemdetails') {
          this.$data.issystem = true;
        } else {
          this.$data.issystem = false;
        }
        ;
        if (this.$route.path == '/layout/interfacea') {
          this.$data.isdevice = true;
        } else {
          this.$data.isdevice = false;
        }
        ;
        if (this.$route.path == '/layout/contacts' || this.$route.path == '/layout/alarmtest') {
          this.$data.isalarm = true;
        } else {
          this.$data.isalarm = false;
        }
        ;
        if (this.$route.path == '/layout/Monitor/power' || this.$route.path == '/layout/Monitor/safe' || this.$route.path == '/layout/Monitor/fire') {
          this.$data.ismonitor = true;
        } else {
          this.$data.ismonitor = false;
        }
        ;
      }
    },
    computed: {
      state_status() {
        return this.$store.state.alarmstatus;
      }
    },
    beforeCreate: function () {
      window.alarm_interval = "";
    },
    watch: {
      $route(to, from) {
        if (to.path == '/layout/systemversion' || to.path == '/layout/systemdetails') {
          this.$data.issystem = true;
        } else {
          this.$data.issystem = false;
        }
        ;
        if (to.path == '/layout/interfacea') {
          this.$data.isdevice = true;
        } else {
          this.$data.isdevice = false;
        }
        ;
        if (to.path == '/layout/contacts' || to.path == '/layout/alarmtest') {
          this.$data.isalarm = true;
        } else {
          this.$data.isalarm = false;
        }
        ;
        if (to.path == '/layout/Monitor/power' || to.path == '/layout/Monitor/safe' || to.path == '/layout/Monitor/fire') {
          this.$data.ismonitor = true;
        } else {
          this.$data.ismonitor = false;
        }
        ;
      },
      state_status(val) {
        let that = this;
        if (val == true) {
          window.alarm_interval = setInterval(function () {
            that.getpopup()
          }, 1000);
        } else {
          window.clearInterval(alarm_interval);
          this.$data.states = false;
          this.$data.editableTabs2 = [];
          this.$data.editableTabsValue2 = "";
        }
      }
    }
  }
</script>
<style>
  .container {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    /*background: #f1f1f1;*/
  }

  .contents {
    height: 100%;
  }

  .header {
    width: 100%;
    height: 80px;
    background: url(../assets/bag.jpg) 100%;
    overflow: hidden;
    min-width: 800px;
  }

  .logo {
    height: 100%;
  }

  .logo-nr {
    width: 90%;
    height: 100%;
    margin: auto;
    color: #fff;
    letter-spacing: 2px;
    position: relative;
    cursor: pointer;
    transition: all 0.5s;
  }

  .logo-nr:hover {
    transform: rotateY(360deg);
  }

  .logo-nr img {
    width: 20%;
    margin-left: 40%;
    margin-top: 5px;
  }

  .logo-nr span {
    display: block;
    width: 100%;
    height: 20px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }

  .nav ul {
    width: 100%;
    height: 80px;
  }

  .nav ul li {
    float: left;
    width: 14%;
    color: #fff;
    text-align: center;
    height: 80px;
    cursor: pointer;
  }

  .navactive {
    background: url(../assets/navbg.png) center no-repeat;
  }

  .navactive span {
    color: #ffd04b;
  }

  .nav img {
    width: auto;
    height: 40px;
    margin: auto;
    margin-top: 5px;
  }

  .nav span {
    display: block;
    width: 100%;
    height: 20px;
    text-align: center;
    color: #fff;
  }

  .nav ul li:hover {
    background: url(../assets/navbg.png) center no-repeat;
    color: #ffd04b;
  }

  .timer {
    width: 90%;
    height: 60px;
    background: #0080c0;
    border-radius: 10px;
    margin: auto;
    margin-top: 10px;
    text-align: center;
    color: #fff;
    line-height: 60px;
    min-width: 155px;
  }

  .timer div {
    height: 30px;
    line-height: 30px;
  }

  .timer img:hover {
    cursor: pointer;
  }

  .publicNav {
    background: #28ade6;
  }

  .publicNav a {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    display: block;
    font-weight: 600;
  }

  .publicNav a:hover, .publicNav .newnava {
    cursor: pointer;
    color: #fff;
    background: url(../assets/bjaa.jpg) repeat-x;
  }

  .nav ul li.feint-nav {
    background: url(../assets/navbg.png) center no-repeat;
  }

  .alarm-pop {
    width: 300px;
    height: 200px;
    position: fixed;
    right: 20px;
    bottom: 10px;
    z-index: 100;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: "Microsoft YaHei";
  }

  .alarm-pop-header {
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    background: #fdf6ec;
    width: 100%;
    color: #409EFF;
    font-weight: 600;
  }

  .el-tabs__content {
    font-size: 12px;
    color: #606266;
    letter-spacing: 1px;
  }

  .alarm-pop-header-left {
    width: 50px;
    height: 40px;
    float: left;
    line-height: 40px;
    text-align: center;
    color: #f56c6c;
    font-size: 25px;
  }

  .alarm-pop-header-left a {
    color: #f56c6c;
  }

  .alarm-pop-header-main {
    width: 100px;
    height: 100%;
    float: left;
    font-size: 15px;
    letter-spacing: 1.5px;
    font-family: "Microsoft YaHei";
  }

  .alarm-pop-header-right {
    width: 30px;
    height: 100%;
    float: right;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
  }

  .item {
    position: absolute;
    right: -10px;
    top: 30px;
    z-index: 1000;
  }

  .fade-enter-active, .fade-leave-active {
    transition: all .6s cubic-bezier(1.0, 0.5, 0.8, 1.0)
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
    transform: translateY(150px);
  }

  .el-tabs__item {
    font-family: "Microsoft YaHei";
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    color: #606266;
    height: 30px;
    line-height: 30px;
  }
</style>
